@charset "utf-8";

@import "common";


.web{
    header{
        height: n(105px);
        .right{
            position: relative;
            width: auto;
            text-align: right;
            margin-top: n(46px);
            margin-right: n(20px);
            color: $border-color;
            i{
                font-size: 32px;
            }
            /**消息个数小圆点***/
            div{
                position: absolute;
                display: inline-block;
                width: 14px;
                height: 14px;
                background: #fa5050;
                color: #fff;
                border-radius:7px ;
                font-size: 10px;
                line-height: 14px;
                text-align: center;
                vertical-align: middle;
                top: 0;
                left: 20px;
            }
        }
    }
    section{
        /***头像部分***/
        .portrait{
            margin-top: n(18px);
            div{
                &:first-of-type{
                    width: n(170px);
                    height: n(170px);
                    @include imgoverflow;
                    margin-left: n(24px);
                }
                &:last-child{
                    overflow: hidden;
                    line-height: 32px;
                    .left{
                        width: auto;
                        text-align: left;
                        margin-top: n(20px);
                        margin-left: n(24px);
                        a{
                            display: block;
                            color: #000000;
                            font-size: $font-30;
                            &:last-child{
                                color: #9d9d9d;
                                font-size: $font-26;
                            }
                        }
                    }
                    .right{
                        margin-right: n(22px);
                        line-height: 70px;
                        span{
                             vertical-align: middle;
                             font-size: n(87px);
                        }
                    }
                }
            }
        }
        /***我的分类***/
       .m_class{
           font-size: 0;
           margin-top: 2px;
           div{
               width:calc(100%/3);
               height: n(152px);
               display: inline-block;
               font-size: 0;
               padding-left: n(24px);
               padding-right: n(24px);
               a{
                   display: inline-block;
                   width: 100%;
                   height: 100%;
                   color: #000000;
                   font-size: $font-26;
                   line-height: 40px;
                   text-align: center;
                   span{
                       display: block;
                       vertical-align: middle;
                   }
                   i{
                       display: inline-block;
                       font-size: 38px;
                       vertical-align: middle;
                       color: white;
                       margin-bottom: -20px;
                   }
               }
               &:first-of-type{
                   a{
                       background: $g_color;
                   }
               }
               &:nth-child(2){
                  a{
                       background: $blue;
                  }
               }
               &:last-child{
                 a{
                       background: $g_color;
                 }
                   
               }
           }
       }
       /******/
      .s_title{
          line-height: 34px;
          .right{
              line-height: 34px;
              margin-top: 0px;
          }
          /**设置**/
          &:nth-of-type(7){
              margin-top: n(40px);
              .left{
                  span{
                      display: inline-block;
                      padding-bottom: 2px;
                  }
              }
          }
          /**找好友**/
          &:nth-of-type(5){
              padding-left: 2px;
              .left{
                  height: 34px;
                  line-height: 34px;
                  i{
                      display: inline-block;
                      margin-top: 4px;
                  }
              }
              span{
                  display: inline-block;
                  padding-bottom: 2px;
                  margin-left: 0px;
              }
              .right{
                  padding-top: 2px;
              }
          }
          &:nth-of-type(4){
              span{
                  
                   margin-left: 8px;
              }
          }
          &:nth-of-type(8){
              span{
                   margin-left: 7px;
              }
          }
      }
      /***退出、注销按钮***/
      .s_btn{
          font-size: 0;
          margin-top: 12px;
          .btn{
              width: 50%;
              display: inline-block;
              text-align: center;
              input{
                  width: n(148px);
                  height: n(76px);
                  border-radius:n(38px) ;
                  background: $border-color;
                  font-size: $font-24;
                  color: white;
              }
          }
      }
    }
}
